import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
import { observable, action, toJS } from 'mobx';
import { Icon, Tools, Modal } from 'weaver-mobile';
import { withRouter, Route } from 'react-router-dom';
import { TabPage, RouteLayout, ListViewPage } from 'weaver-mobile-page';
import RemindStore from './../../stores/remind/RemindStore';
import RemindItem from './RemindItem';
import RemindAddForm from './RemindAddForm.js';
import ContactList from '../list/ContactList';
import ChanceCard from '../card/Chance';
import CustomerCard from '../card/Customer';
import ContacterCard from '../card/Contacter';
const alert = Modal.alert;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}
const getLabel = Tools.getLabel;
@withRouter
@observer
export default class Remind extends Component {
    constructor(props) {
        super(props);
        this.state = {
            store: new RemindStore(),
            sellChanceId: "",
        }
    }
    index = 0;
    currentChance = "";
    tip = "";
    total = 0;
    componentWillMount() {
        const { doNew } = this.state.store;
        doNew(this, this.props.params);
    }
    doInIt = (e) => {
        const { tabs, list, receivecof, doInIt } = this.state.store;
        doInIt();
    }
    onRefresh = () => {
        this.index = 0;
        this.total = 0;
    }
    onRowSelect = (e) => {
        // console.log("行选中")
    }
    render() {
        const { tabs, list, doInIt, contactLogLayout, addRemindLayout, updateTabKey, tabKey, showHead,
            sellChanceCardLayout, customerCardLayout, contacterCardLayout } = this.state.store;
        const { sellChanceId, workPlanId, customerid, contacterid } = this.state;
        // console.log(tabKey)
        const tabProps = {
            page: tabKey,
            onChange: (tab) => {
                this.index = 0;
                this.total = 0;
                updateTabKey(tab.key);
                doInIt();
            },
        };
        const btns = [
            <div onClick={() => this.onaddRemindClick()} >
                <Icon type="plus" />
            </div>
        ];

        let ListViewPageNrmal = {};
        ListViewPageNrmal.store = list;
        ListViewPageNrmal.getTemplate = this.getTemplate;
        ListViewPageNrmal.multipleCheck = false;
        ListViewPageNrmal.withSwipeAction = true;
        ListViewPageNrmal.onRefresh = this.onRefresh;
        ListViewPageNrmal.onRowSelect = this.onRowSelect;
        if (showHead) {
            // ListViewPageNrmal.heightSpace = 50;
            ListViewPageNrmal.swipeActionProps = {
                right: [{
                    text: getLabel("20230", "移除"),
                    onPress: (data) => {
                        // console.log('移除: ', data);
                        this.state.store.deleteRemind({
                            type: data.rolespan,
                            id: data.id
                        });
                        const a = this.index
                        // console.log(a);
                        this.index = 0;
                        this.total = 0;
                        if (data.rolespan == "1" && data.receivecof == "0") {
                            // console.log("当前用户的角色时提醒接收人并且为未确认状态，如果确认状态是未确认，点击时会调用保存")
                            this.state.store.saveRemindConf(data.id);
                        }
                    },
                    className: `crm-list-swipe-green`,
                },],
            };
        }
        return (<div className="crm-remind-main" >
            {showHead &&
                <TabPage
                    className="tab-page-example"
                    tabs={tabs}
                    tabProps={tabProps}
                    btns={btns}
                />
            }
            <div className="crm-remind-main-list" >
                <ListViewPage.Normal
                    {...ListViewPageNrmal}
                />
            </div >
            < Route key={contactLogLayout.id}
                path={contactLogLayout.path}
                render={
                    () => { // 联系记录
                        let detailContent = <ContactList params={{ id: workPlanId }}></ContactList>;
                        return (
                            <RouteLayout getContainer={() => document.getElementById("root")} >
                                <div key="contactLogLayout"
                                    className="wm-route-layout crm-remind-main" >
                                    {detailContent}
                                </div>
                            </RouteLayout >
                        )
                    }
                }
            />
            <Route key={addRemindLayout.id}
                path={addRemindLayout.path}
                render={() => { // 新建提醒
                    let detailContent = < RemindAddForm
                        callBack={this.doInIt}
                    />
                    return (
                        <RouteLayout
                            getContainer={() => document.getElementById("root")} >
                            <div key="addRemindLayout"
                                className="wm-route-layout crm-remind-main" >
                                {detailContent}
                            </div>
                        </RouteLayout >
                    )
                }
                }
            />
            < Route
                key={sellChanceCardLayout.id}
                path={sellChanceCardLayout.path}
                render={
                    () => { // 商机卡片
                        let detailContent = <ChanceCard params={{ id: sellChanceId }} />
                        return (
                            < RouteLayout getContainer={() => document.getElementById("root")} >
                                < div key="sellChanceCardLayout"
                                    className="wm-route-layout crm-remind-main" >
                                    {detailContent}
                                </div>
                            </RouteLayout >
                        )
                    }
                }
            />
            < Route
                key={customerCardLayout.id}
                path={customerCardLayout.path}
                render={
                    () => { // 客户卡片
                        let detailContent = <CustomerCard params={{ id: customerid }} />
                        return (
                            < RouteLayout getContainer={() => document.getElementById("root")} >
                                < div key="customerCardLayout"
                                    className="wm-route-layout crm-remind-main" >
                                    {detailContent}
                                </div>
                            </RouteLayout >
                        )
                    }
                }
            />
            < Route
                key={contacterCardLayout.id}
                path={contacterCardLayout.path}
                render={
                    () => { // 联系人
                        let detailContent = <ContacterCard params={{ id: contacterid }} />
                        return (
                            < RouteLayout getContainer={() => document.getElementById("root")} >
                                < div key="contacterCardLayout"
                                    className="wm-route-layout crm-remind-main" >
                                    {detailContent}
                                </div>
                            </RouteLayout >
                        )
                    }
                }
            />
        </div>
        );
    }
    //回复
    onReplyRef = (ref) => {
        this.replyRef = ref;
    }
    onReplyRefClick = (params) => {
        this.replyRef.onClick(params);
    }
    //人员卡片
    onHrmCardClick = (params) => {
        const { hrmCardLayout } = this.state.store;
        const { history } = this.props;
        this.setState({ hrmId: params })
        history.push(hrmCardLayout.path);
    }
    //新建记录
    onaddRemindClick = (e) => {
        const { addRemindLayout } = this.state.store;
        const { history } = this.props;
        this.setState({ sellChanceId: e });
        history.push(addRemindLayout.path);
    }
    //跳转到商机的所有联系记录页面
    onContactClick = (params) => {
        const { contactLogLayout } = this.state.store;
        const { history } = this.props;
        this.setState(params);
        history.push(contactLogLayout.path);
    }
    //跳转到商机卡片
    onSellChanceCardClick = (params) => {
        const { sellChanceCardLayout } = this.state.store;
        const { history } = this.props;
        this.setState(params);
        history.push(sellChanceCardLayout.path);
    }
    //跳转到客户卡片
    onCustomerClick = (params) => {
        const { customerCardLayout } = this.state.store;
        const { history } = this.props;
        this.setState(params);
        history.push(customerCardLayout.path);
    }
    onContacterClick = (params) => {
        const { contacterCardLayout } = this.state.store;
        const { history } = this.props;
        this.setState(params);
        history.push(contacterCardLayout.path);
    }
    getTemplate = (template) => {
        let today = moment().format('YYYY-MM-DD');
        let yestoday = moment().add('days', -1).format('YYYY-MM-DD');
        const { list } = this.state.store;
        const newTemp = {
            default: [{
                key: 'col_1',
                render: (data) => {
                    // console.log(this.index);
                    // if (this.total != list.data.length) {//进入路由层的时候会刷新整个列表，造成列表日期分割线刷掉。total变量标识当前数据的长度
                    if (list.data.length == this.total) {
                        this.index = 0;
                        this.total = 0;
                    }
                    const { createdate } = data;
                    if (createdate != this.currentData) {
                        this.currentData = createdate;
                        this.index = 0;
                    }
                    if (createdate == today) {
                        this.tip = getLabel('514760', '今日提醒');
                    } else if (createdate == yestoday) {
                        this.tip = getLabel('514761', '昨日提醒');
                    } else if (createdate == '1900-01-01') {
                        this.tip = getLabel('514762', '未提醒');
                    } else {
                        this.tip = createdate;
                    }
                    this.index++;
                    this.total++;
                    return (
                        < div className='crm-remind-main-item' >
                            {this.index == 1 &&
                                < div className="crm-remind-tip" >
                                    {this.tip}
                                </div >}
                            <RemindItem
                                data={data}
                                onReplyRefClick={this.onReplyRefClick} //快速回复
                                onContactClick={this.onContactClick} //该商机全部联系记录
                                onSellChanceCardClick={this.onSellChanceCardClick}//商机卡片
                                onCustomerClick={this.onCustomerClick}//客户卡片
                                onHrmCardClick={this.onHrmCardClick}//人员卡片
                                onContacterClick={this.onContacterClick}
                                obj={this} //当前对象
                                showDrop={true}
                            />
                        </div >
                    );
                },
            }],
        };
        return newTemp;
    }
}